<template>
  <div class="attr-list">
    <px-image
      v-show="eqpImgList[curImageName]"
      style="width: 250px; height: 250px"
      :src="eqpImgList[curImageName]"
      :zoom-rate="1.2"
      :preview-src-list="[eqpImgList[curImageName]]"
      :initial-index="4"
      :z-index="2000"
      :preview-teleported="true"
      fit="cover"
    />
    <CommonAttr />
    <px-form>
      <px-form-item label="title">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.title
          "
        />
      </px-form-item>
      <px-form-item label="tip">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.tip
          "
        />
      </px-form-item>
      <px-form-item label="routerKey">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.routerKey
          "
        />
      </px-form-item>
      <px-form-item label="routerPath">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.routerPath
          "
        />
      </px-form-item>
      <px-form-item label="长显示提示">
        <px-switch v-model="curComponent.propValue.longDisplay" size="small" />
      </px-form-item>
      <px-form-item label="原点样式">
        <px-switch v-model="curComponent.propValue.isCircle" size="small" />
      </px-form-item>
      <px-form-item label="三角样式">
        <px-switch v-model="curComponent.propValue.isTriangle" size="small" />
      </px-form-item>
      <px-form-item label="编辑态显示提示">
        <px-switch v-model="curComponent.propValue.isEditerlongDisplay" size="small" />
      </px-form-item>
      <px-form-item label="位置是否正确">
        <px-switch v-model="curComponent.propValue.isPositionRight" size="small" />
      </px-form-item>
      <px-form-item label="是否断行">
        <px-switch v-model="curComponent.propValue.isBreakLine" size="small" />
      </px-form-item>
      <px-form-item label="阀门样式">
        <px-switch v-model="curComponent.propValue.isvalve" size="small" />
      </px-form-item>
      <px-form-item label="流量计样式">
        <px-switch v-model="curComponent.propValue.isflowmetre" size="small" />
      </px-form-item>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { inject, onMounted, ref, watch } from "vue";
import { downloadPic } from "@visual/api/api";

const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
const eqpImgList = ref({});
const curTreeData = inject("curTreeData");
const curImageName = ref("");
let timer = null;
watch(
  () => curComponent.value.propValue.routerKey,
  async newVal => {
    if (newVal) {
      if (timer !== null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        if (newVal) {
          const data = curTreeData.value[newVal];
          if (data) {
            const { imgName } = data;
            if (imgName) {
              curImageName.value = imgName;
              await getImagByName(imgName);
            } else {
              curImageName.value = "";
            }
          } else {
            curImageName.value = "";
          }
        } else {
          curImageName.value = "";
        }
      }, 100);
    }
  },
  {
    immediate: true
  }
);

const getImagByName = async name => {
  if (!name) return;
  if (eqpImgList.value[name]) {
    return eqpImgList.value[name];
  }
  let res = await downloadPic({ originalName: name, moduleName: "twins_visualization" });
  if (res && res[0]) {
    const { fileUrl } = res[0];
    eqpImgList.value[name] = fileUrl;
  }
};
</script>
